<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-single-selector-bar
                title="弹出位置"
                desc="position"
                :options="positions"
                v-model="position"
                @change="modal.position = positions[$event].value"
            ></uxt-single-selector-bar>
            <uxt-bar title="指定宽高" desc="width | height,需要带单位,rpx/px/%">
                <template slot="right">
                    宽
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="modal.width"
                    ></uxt-input>
                    高
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="modal.height"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-bar title="内容宽高" desc="内容宽高只是作为演示用的,需要带单位,rpx/px/%">
                <template slot="right">
                    宽
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="modal.width2"
                    ></uxt-input>
                    高
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="modal.height2"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-bar
                title="最小宽高"
                desc="min-width | min-height(配合内容宽高及弹出位置),需要带单位,rpx/px/%"
            >
                <template slot="right">
                    宽
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="modal.minWidth"
                    ></uxt-input>
                    高
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="modal.minHeight"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-bar
                title="最大宽高"
                desc="max-width | max-height(配合内容宽高及弹出位置),需要带单位,rpx/px/%"
            >
                <template slot="right">
                    宽
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="modal.maxWidth"
                    ></uxt-input>
                    高
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        v-model="modal.maxHeight"
                    ></uxt-input>
                </template>
            </uxt-bar>
            <uxt-bar title="遮罩层" desc="modal">
                <template slot="right">
                    <uxt-switch v-model="modal.modal" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="遮罩层透明度" desc="opacity,默认0.6">
                <template slot="right">
                    <view class="flex align-center justify-end">
                        <uxt-icon
                            type="plus-circle"
                            color="theme"
                            @click="handleOpacityPlus"
                        ></uxt-icon>
                        <view class="padding-xs">{{ modal.opacity }}</view>
                        <uxt-icon
                            type="minus-circle"
                            color="theme"
                            @click="handleOpacityMinus"
                        ></uxt-icon>
                    </view>
                </template>
            </uxt-bar>
            <uxt-bar title="遮挡导航栏" desc="above">
                <template slot="right">
                    <uxt-switch v-model="modal.above" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="点遮罩层关闭" desc="modal-close">
                <template slot="right">
                    <uxt-switch v-model="modal.modalClose" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="关闭按钮" desc="close">
                <template slot="right">
                    <uxt-switch v-model="modal.close" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="展示标题" desc="title">
                <template slot="right">
                    <uxt-switch
                        radius
                        size="sm"
                        @change="handleChange($event, 'title', '标题')"
                    ></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-color-selector-bar
                title="背景"
                desc="bg-color=xx/颜色值"
                v-model="modal.bgColor"
                light
                gradual
            ></uxt-color-selector-bar>
            <uxt-bar title="外部关闭" desc="修改v-model绑定的布尔值进行打开和关闭">
                <template slot="right">
                    3秒后关闭：
                    <uxt-switch radius size="sm" v-model="outerClose"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="动画持续时间" desc="duration,默认300ms">
                <template slot="right">
                    <view class="flex align-center justify-end">
                        <uxt-icon
                            type="plus-circle"
                            color="theme"
                            @click="modal.duration += 100"
                        ></uxt-icon>
                        <view class="padding-xs">{{ modal.duration }}ms</view>
                        <uxt-icon
                            type="minus-circle"
                            color="theme"
                            @click="handleDurationMinus"
                        ></uxt-icon>
                    </view>
                </template>
            </uxt-bar>
        </uxt-bar-group>
        <uxt-bar-group title="事件">
            <template slot="right">
                <text @click="events = ''">清空</text>
            </template>
            <view
                class="padding bg-white"
                v-html="events"
                style="height: 200rpx; overflow-y: auto;"
            ></view>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="padding bg-white text-center">
                <uxt-button size="block" round @click="handleShowModal">弹出模态框</uxt-button>
            </view>
        </uxt-bar-group>
        <uxt-modal
            :bg-color="modal.bgColor"
            :close="modal.close"
            :height="getSize2(modal.height)"
            :width="getSize2(modal.width)"
            :max-height="getSize2(modal.maxHeight)"
            :max-width="getSize2(modal.maxWidth)"
            :min-height="getSize2(modal.minHeight)"
            :min-width="getSize2(modal.minWidth)"
            :modal="modal.modal"
            :modal-close="modal.modalClose"
            :position="modal.position"
            :title="modal.title"
            :opacity="modal.opacity"
            :duration="modal.duration"
            :above="modal.above"
            v-model="show"
            @open="handleEvent('open', $event)"
            @opened="handleEvent('opened', $event)"
            @close="handleEvent('close', $event)"
            @closed="handleEvent('closed', $event)"
        >
            <view
                :style="{ width: getSize2(modal.width2), height: getSize2(modal.height2) }"
                class="padding-xl bg-theme inline-block margin-xl"
            >
                {{ modal.message }}
            </view>
        </uxt-modal>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtButton from '@xtcoder/uxt/components/uxt-button.vue'
import uxtModal from '@xtcoder/uxt/components/uxt-modal.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'
import uxtInput from '@xtcoder/uxt/components/uxt-input.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtSingleSelectorBar from '@xtcoder/uxt/components/uxt-single-selector-bar.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'
import uxtIcon from '@xtcoder/uxt/components/uxt-icon.vue'

export default {
    components: {
        uxtBarGroup,
        uxtButton,
        uxtModal,
        uxtSwitch,
        uxtInput,
        uxtBar,
        uxtSingleSelectorBar,
        uxtColorSelectorBar,
        uxtIcon
    },
    data() {
        return {
            title: '模态框',
            tid: 0,
            outerClose: false,
            show: false,
            positions: [
                {
                    label: '居中',
                    value: 'center'
                },
                {
                    label: '全屏',
                    value: 'full'
                },
                {
                    label: '上',
                    value: 'top'
                },
                {
                    label: '右',
                    value: 'right'
                },
                {
                    label: '下',
                    value: 'bottom'
                },
                {
                    label: '左',
                    value: 'left'
                }
            ],
            position: 0,
            modal: {
                position: 'center',
                width: '',
                height: '',
                minWidth: '',
                minHeight: '',
                maxWidth: '',
                maxHeight: '',
                modal: true,
                modalClose: true,
                close: false,
                title: '',
                bgColor: 'white',
                width2: '',
                height2: '',
                message: '内容',
                opacity: 0.6,
                duration: 300,
                above: true
            },
            events: ''
        }
    },
    methods: {
        getSize2(size) {
            if (/^\d+$/g.test(size)) {
                return Number(size)
            } else {
                return size
            }
        },
        handleChange(check, field, value) {
            if (check) {
                this.modal[field] = value
            } else {
                this.modal[field] = ''
            }
        },
        handleOpacityPlus() {
            this.modal.opacity < 1 &&
                (this.modal.opacity = Math.round((this.modal.opacity + 0.1) * 10) / 10)
        },
        handleOpacityMinus() {
            this.modal.opacity > 0 &&
                (this.modal.opacity = Math.round((this.modal.opacity - 0.1) * 10) / 10)
        },
        handleDurationMinus() {
            this.modal.duration > 0 && (this.modal.duration -= 100)
        },
        handleShowModal() {
            this.show = true
            this.tid && clearTimeout(this.tid)
            if (this.outerClose) {
                this.tid = setTimeout(() => {
                    this.show = false
                }, 3000)
            }
        },
        handleEvent(type, e) {
            this.events += `@${type}${e !== undefined ? `(${JSON.stringify(e)})` : ''}<br />`
        }
    }
}
</script>

<style lang="scss" scoped></style>
